﻿@model SimplCommerce.Module.Cms.Areas.Cms.ViewModels.CarouselWidgetViewComponentVm

@{
    var effects = new string[] { "fadeInDown", "fadeInUp", "zoomIn", "rollIn", "lightSpeedIn", "slideInUp", "rotateInDownLeft", "rotateInUpRight", "rotateIn" };
    var numEffects = effects.Length - 1;
    var random = new Random();
}

<section class="section-slide">
    <div class="wrap-slick1">
        <div class="slick1">
            @foreach (var item in Model.Items)
            {
                <div class="item-slick1" style="background-image: url(@item.Image);">
                    <div class="container h-full">
                        <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
                            <div class="layer-slick1 animated visible-false" data-appear="@effects[random.Next(0, numEffects)]" data-delay="0">
                                <span class="ltext-101 cl2 respon2">
                                    @item.SubCaption
                                </span>
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="@effects[random.Next(0, numEffects)]" data-delay="800">
                                <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1">@item.Caption</h2>
                            </div>

                            <div class="layer-slick1 animated visible-false" data-appear="@effects[random.Next(0, numEffects)]" data-delay="1600">
                                <a href="@item.TargetUrl" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">
                                    @item.LinkText
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</section>